<template>
    <div>
        <div class="fix">
            <div class="city" v-if="isShow==true">
                <div class="" @click="handleClick">{{location}}</div>
                <div class="dytitle">电影</div>
            </div>
            <div class="show">
                <div @click="handletab(index,item.path)" :class="[active==index?'current':'']" 
                    v-for="(item,index) of tabs" :key="index">{{item.name}}</div>
            </div>
        </div>
        
        <router-view />

        <div>
            <van-tabbar v-model="activedowm">
                <van-tabbar-item to="/films/nowPlaying" icon="">电影</van-tabbar-item>
                <van-tabbar-item icon="">影院</van-tabbar-item>
                <van-tabbar-item icon="https://mall.s.maizuo.com/mzmovie-icon-news-42x42-gray.png">资讯</van-tabbar-item>
                <van-tabbar-item to="/center" icon="">我的</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>

//<div :class="['playtitle',scroll?'show':'']">
            //     <div @click="handletab(index,item.path)" :class="[active==index?'current':'']" 
            //         v-for="(item,index) of tabs" :key="index">{{item.name}}</div>
            // </div>
// import axios from 'axios';
    export default {
        data() {
            return {
                active: 0,
                tabs:[{name:"正在热映",path:"/films/nowPlaying"},{name:"即将上映",path:"/films/comingSoon"}],
                // movies:[],
                location:"",
                activedowm:0,
                isShow:false,
            };
        },
        methods: {
            handletab(index,path){
                this.active = index;
                console.log(path)
                this.$router.push(path)
            },
            handleClick(){
                this.$router.push('/city')
            },
            handleScroll(){
                var scrollTop = document.documentElement.scrollTop;
                if(scrollTop>100){
                    this.isShow = true
                }
            }
        },
        mounted(){
            console.log("mounted")
            window.addEventListener("scroll",this.handleScroll)
            /* let url = "http://47.108.197.28:4000/api/movie/top250";
            axios.get(url).then(res=>{
            this.movies = res.data.res;
            }) */
            let data = {
                key: "V7DBZ-ZKGWR-QU6W7-W4YAM-A3DDZ-PBFTL"
            };
                let cityurl = "https://apis.map.qq.com/ws/location/v1/ip";
                data.output = "jsonp";
                this.$jsonp(cityurl, data)
                .then(res => {
                    this.location = res.result.ad_info.city
                    localStorage.setItem("locationCity",this.location)
                })

        },
        destroyed() {
            console.log("destroyed")
            window.removeEventListener("scroll",this.handleScroll)
        },
    }
</script>

<style scoped>
.fix{
    width: 100%;
    height: 100px;
    position: fixed;
    background: #eee;
    top: 0;
}
.city{
    height: 30px;
    top: 0;
    display: flex;
}
.dytitle{
    margin: 0 30%;
}
.current{
    color: orangered;
    text-align: center;
    line-height: 60px;
}
/* .playtitle{
    height: 50px;
    top: 50px;
} */
.show{
    top: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

</style>